<template>
  <div class="m-pagination tw_cr">
<!--    <el-pagination-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="currentPage"-->
<!--      :page-sizes="pageSizesArr"-->
<!--      :page-size="pageSize"-->
<!--      layout="total, slot, prev, pager, next, ->, sizes, jumper"-->
<!--      :total="totalData"-->
<!--    >-->
<!--      <span class="anthor">-->
<!--        第{{ page._currentPage }}/{{-->
<!--        Math.ceil(totalData / page._pageSize)-->
<!--        }}页-->
<!--      </span>-->
<!--    </el-pagination>-->
<!--      :page-count="total"-->
      <el-config-provider :locale="zhCn">
          <el-pagination
              v-model:currentPage="page"
              v-model:page-size="currentPageSize"
              :page-sizes="pageSizesArr"
              :disabled="disabled"
              :layout="layout"
              :total="total"
              :small="small"
              :background="background"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
      </el-config-provider>
      
  </div>
</template>

<script lang="tsx" setup name="TwPagination">

import zhCn from 'element-plus/es/locale/lang/zh-cn';
defineOptions({
    name: 'TwPagination'
})
let { currentPage, pageSize, total, disabled, pageSizesArr, size , background, layout  } = defineProps({
    currentPage: {type: Number, default: 1,},   // 当前页
    pageSize: {type: Number, default: 25,},     // 每页显示条数
    total: {type: Number, default: 0,},     // 总页数
    size: { type: String, default: 'default' },                            // table 大小配置
    disabled: {type: Boolean, default: false,},     // 每页显示条数
    pageSizesArr: {type: Array, default() {return [25, 50, 100]},},
    layout:{ type: String, default: 'total, prev, pager, next, sizes, jumper' },
    background:{ type: Boolean, default: true },
})
let small = $ref(false)
small = size == 'small'
let page = $ref(currentPage)
let currentPageSize = $ref(25)
currentPageSize = pageSize
page = currentPage
watch(() => currentPage, (val) => {
    page = val
})
// 事件注册
let emits = defineEmits(["update:currentPage", "update:pageSize", 'handleSizeChange', 'handleCurrentChange'])

//  每页查看条数变化
const handleSizeChange = (val) => {
    emits("update:pageSize", val);
    emits("handleSizeChange", val);
};
// 当前页码变化
const handleCurrentChange = (val) => {
    emits("update:currentPage", val);
    emits("handleCurrentChange", val);
};

const setPage = (val) => {
    page = val
}

defineExpose({setPage})
</script>



<style lang="scss" scoped>
    .m-pagination {
        padding: 10px 20px;
        :deep(.el-pagination .el-select .el-input) { margin-left: 20px}
    }
</style>
